<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计报表</title>

    <script src="/static/jQuery/jquery.js"></script>
    <script src="/static/echart/echarts.min.js"></script>
</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">


    $(function () {
        var x = [];
        var y = [];

        $.ajax({
            url: '/sys/count/echart',
            type: 'get',
            dataType: 'json',
            success: function (re) {
                if (re.status === 0) {
                    var result = re.data;

                    for (var i = 0; i < result.length; i++) {
                        x.push(result[i].category_name);
                        y.push(result[i].total);
                    }
                    //把x，y轴需要的数据填充进去
                    echart(x, y);
                }else {
                    alert(re.msg);
                }
            },
            error: function () {
                alert("参数异常");
            }
        });


        function echart(x, y) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '统计'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: y,
                    type: 'bar'
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });

</script>

</body>
</html>